<template>
  <div>
    <Card>
      <div slot="title">
        <div class="edit-head">
          <a @click="close" class="back-title">
            <Icon type="ios-arrow-back" />返回
          </a>
          <div class="head-name">添加</div>
          <span></span>
          <a @click="close" class="window-close">
            <Icon type="ios-close" size="31" class="ivu-icon-ios-close" />
          </a>
        </div>
      </div>
      <Form
        ref="form"
        :model="form"
        :label-width="150"
        :rules="formValidate"
        label-position="left"
      >
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="选择投保人">
              <span style="color: #f00; font-size: 22px">{{ nowUser1 }}</span>
              <userChoose @on-change="getOneUserData"></userChoose>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="选择被保人">
              <span style="color: #f00; font-size: 22px">{{ nowUser2 }}</span>
              <buserChoose @on-change="getOneUserData2"></buserChoose>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="选择险种">
              <span style="color: #f00; font-size: 22px">{{
                nowMedicine
              }}</span>
              <medicineChoose @on-change="getMedicineData"></medicineChoose>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="缴费金额" prop="payMoney">
              <Input
                v-model="form.payMoney"
                clearable
                @on-change="changePrice"
              />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="是否续保" prop="renewOrNot">
              <i-switch
                v-model="form.renewOrNot"
                @on-change="change"
              ></i-switch>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="联系电话" prop="phone">
              <Input v-model="form.phone" clearable />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="通讯地址" prop="address">
              <Input v-model="form.address" clearable />
            </FormItem>
          </Col>
        </Row>
        <Form-item class="br">
          <Button @click="handleSubmit" :loading="submitLoading" type="primary"
            >提交并保存</Button
          >
          <Button @click="handleReset">重置</Button>
          <Button type="dashed" @click="close">关闭</Button>
        </Form-item>
      </Form>
    </Card>
  </div>
</template>

<script>
// import { getInsuranceOne } from "@/api/index";
import { addMeeting } from "./api.js";
import userChoose from "./userChoose.vue";
import medicineChoose from "./medicineChoose.vue";
import buserChoose from "./buserChoose.vue";
export default {
  name: "add",
  components: {
    userChoose,
    medicineChoose,
    buserChoose,
  },
  data() {
    return {
      nowMedicine: "尚未选择险种",
      nowUser1: "尚未选择客户",
      nowUser2: "尚未选择客户",
      submitLoading: false, // 表单提交状态
      form: {
        productId: "",
        insuredTouId: "",
        insuredBeiId: "",
        payMoney: "",
        renewOrNot: true,
        phone: "",
        address: "",
        // 添加或编辑表单对象初始化数据
        // userId: "",
        // price: 0,
        // priceSum: 0,
        // medicinePrice: "",
        // type: "",
        // balance: 0,
        // priceOld: 0,
        // price: 0,
        // priceYou: 0,
      },
      // 表单验证规则
      // formValidate: {
      //   name: [
      //     {
      //       required: true,
      //       message: "不能为空",
      //       trigger: "blur",
      //     },
      //   ],
      //   peopleNum: [
      //     {
      //       type: "number",
      //       required: true,
      //       message: "不能为空",
      //       trigger: "blur",
      //     },
      //   ],
      //   zuoBiao: [
      //     {
      //       required: true,
      //       message: "不能为空",
      //       trigger: "blur",
      //     },
      //   ],
      //   guiGe: [
      //     {
      //       required: true,
      //       message: "不能为空",
      //       trigger: "blur",
      //     },
      //   ],
      //   haoCai: [
      //     {
      //       required: true,
      //       message: "不能为空",
      //       trigger: "blur",
      //     },
      //   ],
      //   manger: [
      //     {
      //       required: true,
      //       message: "不能为空",
      //       trigger: "blur",
      //     },
      //   ],
      // },

      shiOrLing: "",
      isImportHuaData: false,
      huasearchForm: {
        pageNumber: 1,
        pageSize: 10,
        username: "",
      },
      exportHuaData: [],
      selectHuaList: [],
      selectHuaCount: [],
      huaData: [], //花名册组件的数据
      dazheList: {
        one: 1,
        two: 1,
        three: 1,
        common: 1,
        mine: 1,
        big: 1,
        name: "未选择",
      },
    };
  },
  methods: {
    //   投保人
    getOneUserData(e) {
      console.log(e);
      this.nowUser1 = e.name;
      this.form.insuredTouId = e.identity;
    },
    // 被投保人
    getOneUserData2(e) {
      this.nowUser2 = e.name;
      this.form.insuredBeiId = e.identity;
    },
    getMedicineData(e) {
      this.nowMedicine = e.productName;
      this.form.productId = e.id;
    },
    showHuaModel() {
      this.shiOrLing = "ling";
      this.getHuaUserList();
      this.isImportHuaData = true;
    },
    huaAddData() {
      var that = this;
      if (this.huaselectCount <= 0) {
        this.$Message.warning("您还未选择要从花名册导入的数据");
        return;
      }
      let ids = "";
      this.huaselectList.forEach(function (e) {
        ids += e.username + ",";
      });
      ids = ids.substring(0, ids.length - 1);
      this.$Message.success("导入成功");
      this.isImportHuaData = false;
      that.form.manger = ids;
    },
    handleReset() {
      this.$refs.form.resetFields();
    },
    handleSubmit() {
      console.log("新增");
      addMeeting(this.form).then((res) => {
        console.log("提交");
        this.submitLoading = false;
        if (res.success) {
          this.$Message.success("操作成功");
          this.submited();
        }
      });

      // var that = this;
      // var money = this.accAdd(that.form.balance, "-" + that.form.priceSum);
      // if (Number.parseFloat(money) < 0.0) {
      //   this.$Message.error("钱不够了,快去充钱!");
      // } else {
      //   that.form.medicineName = that.nowMedicine;
      //   this.$refs.form.validate((valid) => {
      //     if (valid) {
      //       addMeeting(this.form).then((res) => {
      //         this.submitLoading = false;
      //         if (res.success) {
      //           this.$Message.success("操作成功");
      //           this.submited();
      //         }
      //       });
      //     }
      //   });
      // }
    },
    close() {
      this.$emit("close", true);
    },
    submited() {
      this.$emit("submited", true);
    },
  },
  // mounted() {
  //   this.init();
  // },
};
</script>

<style lang="less">
.edit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;

  .back-title {
    color: #515a6e;
    display: flex;
    align-items: center;
  }

  .head-name {
    display: inline-block;
    height: 20px;
    line-height: 20px;
    font-size: 16px;
    color: #17233d;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .window-close {
    z-index: 1;
    font-size: 12px;
    position: absolute;
    right: 0px;
    top: -5px;
    overflow: hidden;
    cursor: pointer;

    .ivu-icon-ios-close {
      color: #999;
      transition: color 0.2s ease;
    }
  }

  .window-close .ivu-icon-ios-close:hover {
    color: #444;
  }
}
</style>
